<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type="text/javascript">
    if (typeof YAHOO === "undefined") {
        YAHOO = {}; 
    }
    YAHOO.Msgr = {};
    YAHOO.Msgr.EmoticonManager = new function () {
        var emoticonManager = {_emoticonTotalNumber:0, _recentEmoticonNumber:0, _currentPage:0, _totalPage: 3, _sliding: false, _perPageEmoticon: 40};
        //currently we have 3 pages of emoticon, and 40 for each page at most.
        var isIe6 = function () {
            var arVersion = navigator.appVersion.split("MSIE"); 
            var version = parseFloat(arVersion[1]) ;
            return version <= 6;
        }();
        
        var escapeHtml = function (str) {
            if (typeof str == "string") {
                str = str.replace(/&/g, "&#38;");
                str = str.replace(/</g, "&#60;");
                str = str.replace(/>/g, "&#62;");
                str = str.replace(/\"/g, "&#34;");
                str = str.replace(/'/g, "&#39;");
                return str;
            }
        }
        var pages = Array();
        var emoticonList = {};
        var recentUsedList = {};
        var leftButton = {};
        var rightButton = {};
        emoticonManager.onClick = function (par) {
            if (typeof par === "string") {
                if (typeof (window.external) !== 'undefined'
                    && typeof (window.external.ReportEmoticonSelect) !== 'undefined') {
                    window.external.ReportEmoticonSelect(par);
                }  
            }
        }
        emoticonManager.changeSkin = function (par) {
            if (typeof par === "string") {
                document.body.className = par;
            }
        }
        emoticonManager.resetButton = function () {
            if (typeof leftButton === "object" && typeof rightButton === "object") {
                leftButton.className = "Button_Left";
                rightButton.className = "Button_Right";
                if (emoticonManager._currentPage === 0) {
                    leftButton.className = "Button_Left_Disable";
                }
                else if(emoticonManager._currentPage === emoticonManager._totalPage - 1) {
                    rightButton.className = "Button_Right_Disable";
                }
            }
        }
        emoticonManager.addEmoticon = function (par) {
            var pageNo = 0;
            if (emoticonManager._emoticonTotalNumber >= 2 * emoticonManager._perPageEmoticon) {
                pageNo = 2;
            }
            else if (emoticonManager._emoticonTotalNumber >= emoticonManager._perPageEmoticon) {
                pageNo = 1;
            }
            emoticonManager.addEmoticonTo(par,  pages[pageNo], emoticonManager._emoticonTotalNumber%10 > 5);
            emoticonManager._emoticonTotalNumber++;
        };

        emoticonManager.setPageText = function(par) {
            var tb = document.getElementById("TitleBar");
            if ( typeof tb !== "undefined") {
                tb.innerHTML = "<b>" + par["TitleBar"] + "</b>";
            }
            var rut = document.getElementById("RecentUsedTitle");
            if ( typeof rut !== "undefined") {
                rut.innerHTML = "<b>" + par["RecentUsedTitle"] + "</b>";
            }
        }
        emoticonManager.slideEmoticonTable = function (par) {
            if (typeof par === "number") {
                var o = emoticonList;
                if (typeof o === "object") {
                    var ls = o.style.marginLeft;
                    var rs = o.style.marginRight;
                    var l = parseInt(ls);
                    var r = parseInt(rs);
                    if (isNaN(l)) {
                        l = 0;
                    }
                    if (isNaN(r)) {
                        r = 0;
                    }
                    l += par;
                    r -= par;
                    o.style.marginLeft = l + "px";
                    o.style.marginRight = r + "px";
                }
            }
        }
        emoticonManager.createEmoticonDiv = function (par, left_preview, div_id) {
            var item = document.createElement("div");
            if (typeof item !== "undefined") {
                item.className = "EmoticonImage";
                var shortcut = escapeHtml(par["shortcut"]);
                var footer = escapeHtml(par["footer"]);
                if (isIe6) {
                    item.innerHTML = " <a href = '#'>"
                        + "<span title='" 
                        + footer
                        + "' style=\"display: inline-block; filter: progid:dximagetransform.microsoft.alphaimageloader(src='"
                        + par["src"]
                        + "', sizingMethod='scale'); width: 18px; cursor: hand; height: 18px\" alt = '"+ footer + "'/>"
                        + "</a>";
                    item.onmouseover = function() {
                        item.className = "EmoticonImage EmoticonImage_Hover";
                    };
                    item.onmouseout = function() {
                        item.className = "EmoticonImage";
                    };
                }
                else {
                    item.innerHTML = " <a href = '#'><img src = '" + par["src"] + "' alt = '"+ footer + "'/></a> " ;
                }
                item.onclick = function () {
                    emoticonManager.onClick(par["shortcut"]);
                };
                if (typeof div_id === "string") {
                    item.id = div_id;
                }
                var preview = document.createElement("div");
                if (typeof preview !== "undefined") {
                    if (left_preview === true) {
                        preview.className = "PreviewWindow PreviewLeft";
                    }
                    else{
                        preview.className = "PreviewWindow PreviewRight";
                    }
                    var pt = document.createElement("div");
                    var pi = document.createElement("div");
                    var pf = document.createElement("div");
                    if ( typeof pt !== "undefined" && typeof pi !== "undefined" && typeof pf !== "undefined" ) 
                    {
                        pt.className = "PreviewTitle";
                        pi.className = "PreviewImage";
                        pf.className = "PerviewFooter";
                        pt.innerHTML = "<p>" + shortcut + "</p>";
                        pi.innerHTML = "<img src = '" + par["gif"] + "' />";
                        pf.innerHTML = "<span>" + footer + "</span>";
                        preview.appendChild(pt);
                        preview.appendChild(pi);
                        preview.appendChild(pf);
                    }
                    item.appendChild(preview);
                }
                return item;
            }
        }
        emoticonManager.addEmoticonTo= function (par, parent, left_preview, div_id) {
            if (typeof parent !== "undefined") {
                var item = emoticonManager.createEmoticonDiv(par, left_preview, div_id);
                if (typeof item !== "undefined") {
                    parent.appendChild(item);
                }
            }
        }
        emoticonManager.addRecentUsedEmoticon = function (par) {
            var parent = recentUsedList;
            if (emoticonManager._recentEmoticonNumber === 0) {
                parent.className = "RecentUsedListClass";
                 var rut = document.getElementById("RecentUsedTitle");
                 if ( typeof rut !== "undefined") {
                    rut.className = "RecentUsedTitleClass";
                 }
            }
            if (emoticonManager._recentEmoticonNumber < 10) {
                emoticonManager.addEmoticonTo(par, parent, false, "__" + par["shortcut"] + "__");
                emoticonManager._recentEmoticonNumber++;
            }
            else{
                var replaced = par["replaced"];
                if (typeof replaced === "string") {
                    var item_old = document.getElementById("__" + replaced + "__");
                    if (typeof item_old !== "undefined") {
                        var item = emoticonManager.createEmoticonDiv(par, false, "__" + par["shortcut"] + "__");
                        if (typeof item !== "undefined") {
                            parent.replaceChild(item, item_old);
                        }
                    }
                }
            }
        };
        emoticonManager.clearRecentUsedEmoticon = function () {
            var parent = recentUsedList;
            if (typeof parent !== "undefined") {
                parent.innerHTML = "";
            }
        }
        emoticonManager.beforeSlide = function () {
            //show the hidden page
            pages[0].className = "OnePage";
            pages[1].className = "OnePage";
            pages[2].className = "OnePage";
        }
        emoticonManager.afterSlide = function () {
            //hidden the page so that TAB can not reach them
            pages[0].className = "OnePageHidden";
            pages[1].className = "OnePageHidden";
            pages[2].className = "OnePageHidden";
            pages[emoticonManager._currentPage].className = "OnePage";
        }
        emoticonManager.onMove = function (left) {
            if (((emoticonManager._currentPage < emoticonManager._totalPage - 1 && left === false) || (emoticonManager._currentPage > 0 && left)) && emoticonManager._sliding === false)
            {
                emoticonManager._sliding = true;
                emoticonManager._currentPage += left? -1: 1; 
                emoticonManager.repeatTimes = 0;
                emoticonManager.resetButton();
                emoticonManager.beforeSlide();
                emoticonManager.intervalId = self.setInterval(left? emoticonManager.onLeft : emoticonManager.onRight, 20);
            }
            if (emoticonManager._sliding === true) {
                var dev = left? 36: -36;// page width is 356, the slide made up of 10 frames, so move 36 px at first 9, and 32 at last time
                if (emoticonManager.repeatTimes === 9) {
                    dev = left? 32: -32;
                }
                emoticonManager.slideEmoticonTable(dev);
                emoticonManager.repeatTimes++;
                if(emoticonManager.repeatTimes === 10) {
                    window.clearInterval(emoticonManager.intervalId);
                    emoticonManager._sliding = false;
                    emoticonManager.afterSlide();
                    
                }
            }
        };
        emoticonManager.onLeft = function () {
            emoticonManager.onMove(true);
        }
        emoticonManager.onRight = function () {
            emoticonManager.onMove(false);
        }
        this.addEmoticon = emoticonManager.addEmoticon;
        this.setPageText = emoticonManager.setPageText;
        this.resetButton = emoticonManager.resetButton;
        this.addRecentUsedEmoticon = emoticonManager.addRecentUsedEmoticon;    
        this.changeSkin = emoticonManager.changeSkin; 
        this.onLeft = emoticonManager.onLeft;
        this.onRight = emoticonManager.onRight;
        this.disableSel = function () {
             function stopRightBtnClick() { 
                return false; 
            } 
            function disableSelect(e) { 
                var flag = ["input", "textarea", "select"];
                flag = flag.join("|");
                if (flag.indexOf(e.target.tagName.toLowerCase()) === -1) {
                    return false; 
                }
            }
            function enableSelect() { 
                return true;
            }
            if (typeof document.onselectstart !== "undefined") {
                document.onselectstart = new Function ("return false"); 
            }
            else{ 
                document.onmousedown = disableselect; 
                document.onmouseup = enableSelect; 
            } 
            document.oncontextmenu = stopRightBtnClick; 
        };
        this.onLoad = function() {
            pages[0] = document.getElementById("Page0");
            pages[1] = document.getElementById("Page1");
            pages[2] = document.getElementById("Page2");
            leftButton = document.getElementById("LeftButton");
            rightButton = document.getElementById("RightButton");
            emoticonList = document.getElementById("EmoticonList");
            recentUsedList = document.getElementById("RecentUsedList");
            document.getElementsByTagName("body")[0].focus();
        };
    }();

    function AddEmoticon() {
        if(arguments.length === 4) {
            var par = {src: arguments[0], shortcut: arguments[1], gif: arguments[2], footer: arguments[3]};
            YAHOO.Msgr.EmoticonManager.addEmoticon(par);    
        }
    }
    function SetPageText() {
        if(arguments.length === 2){
            var par = {TitleBar : arguments[0], RecentUsedTitle : arguments[1]};
            YAHOO.Msgr.EmoticonManager.setPageText(par);    
        }
        YAHOO.Msgr.EmoticonManager.resetButton();
    }
    function AddRecentUsed(par) {
        if(arguments.length >= 4) {
            var par = {src: arguments[0], shortcut: arguments[1], gif: arguments[2], footer: arguments[3]};
            if (arguments.length === 5) {
                par["replaced"] = arguments[4];
            }
            YAHOO.Msgr.EmoticonManager.addRecentUsedEmoticon(par);    
        }
       
    }
     function ChangeSkin(par) {
        YAHOO.Msgr.EmoticonManager.changeSkin(par); 
    }
        

    </script>
    
    <style type="text/css">
    
    html 
    { 
        overflow: hidden; 
        margin: 0px; 
        padding: 0px;
    }
    body
    {
        margin: 0px; 
        padding: 0px;
        overflow: hidden;
        background: #fff; 
    } 
    #Container 
    {
        font-family: Arial;
        float: left;
        background: #FFFFFF; 
        width: 1250px;
        color: #A982D3;
        border-style: solid;
        border-width: 1px;
    }
    #TitleBar
    {
        clear: both;
        height: 25px;
        width: 355px;
        background-image: url('./BackGround.PNG');
    }
    .Button_Left
    {
        background: transparent url('./icn_left.png');
        _background: none;
        _FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./icn_left.png');
        background-color: #A982D3;
        width: 20px;
        height: 18px;
        left: 293px;
        top: 8px;
        position: absolute;
        display: block;
        border: 0px; 
    }
    .Button_Right
    {
        background: transparent url('./icn_right.png');
        _background: none;
        _FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./icn_right.png');
        background-color: #A982D3;
        width: 20px;
        height: 18px;
        left: 325px;
        top: 8px;
        position: absolute;
        display: block;
        border: 0px; 
    }
    .Button_Left:hover
    {
        background: transparent url('./icn_left_hover.png');
        _background: none;
        _FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./icn_left_hover.png');
        background-color: #A982D3;
    }
    .Button_Right:hover
    {
        background: transparent url('./icn_right_hover.png');
        _background: none;
        _FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./icn_right_hover.png');
        background-color: #A982D3;
    }
    .Button_Left_Disable
    {
        background: transparent url('./icn_left.png');
        _background: none;
        _FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./icn_left.png');
        background-color: #aeb2b2;
        width: 20px;
        height: 18px;
        left: 293px;
        top: 8px;
        position: absolute;
        display: block;
        border: 0px; 
    }
    .Button_Right_Disable
    {
        background: transparent url('./icn_right.png');
        _background: none;
        _FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./icn_right.png');
        background-color: #aeb2b2;
        width: 20px;
        height: 18px;
        left: 325px;
        top: 8px;
        position: absolute;
        display: block;
        border: 0px; 
    }
    #EmoticonList
    {
        float: left;
        margin-left: 0px;
        margin-right: 0px;
    }

    .OnePage
    {
        visibility: visible;
        float: left;
        width: 355px;
        height: 145px;
        padding: 0;
        margin: 0px;
        border-right-style: solid;
        border-right-width: 1px;
        _margin-left: -5px;
        _width: 360px;
    }
    .OnePageHidden
    {
        visibility: hidden;
        float: left;
        width: 355px;
        height: 145px;
        padding: 0;
        margin: 0px;
        border-right-style: solid;
        border-right-width: 1px;
    }
    .EmoticonImage
    {
        overflow: hidden;
        border-top: 5px solid #fff;
        border-left: 5px solid #fff;
        margin: 0;
        width: 30px;
        height: 18px;
        padding: 6px 0;
        background: white;
        float: left;
        text-align: center;
        vertical-align: middle;
    }
    .EmoticonImage:hover, .EmoticonImage_Hover
    {
        background-color: #A982D3;
    }
    
    .PreviewLeft 
    {
        left: 5px;
        top: 35px;
    }
    .PreviewRight 
    {
        right: 5px;
        top: 35px;
    }
    .PreviewWindow 
    {
        display: none;
        margin: 0px;
        position: absolute;
        background: #ffffff;
        border-style: solid;
        border-width: 1px;
        color: #A982D3;    
        width: 68px;
        height: auto;
        overflow: hidden;
    }
    .EmoticonImage:hover .PreviewWindow, .EmoticonImage.EmoticonImage_Hover .PreviewWindow 
    {
        display: block;
    }
    .PreviewTitle
    {
        margin: 0;
        font-size: 9pt;
        text-align: right;
        padding-right: 5px;
        padding-top: 2px;
        height: 14px;
    }
    .PreviewImage
    {
        padding-top: 11px;
        padding-bottom: 11px;
        height: 18px;
    }
    .PerviewFooter
    {
        padding-top: 5px;
        padding-bottom: 5px;
        margin: 0px;
        text-align: center;
        font-size: 9pt;
        color: #FFFFFF;
        background-color: #A982D3;    
    }
    #RecentUsedTitle
    {    
        margin: 0px;
        padding: 0;
        clear: both;
		width: 355px;
        background-image: url('./Line.PNG');
    }
    .RecentUsedTitleClass_Empty
    {
        visibility: hidden;
        height: 0;
    }
    .RecentUsedTitleClass
    {
        visibility: visible;
        height: 5px;
    }
    .RecentUsedListClass
    {
        margin-top: 0px;
        clear: both;
        height: 40px;
        width: 355px;
        _margin-left: -5px;
        _width: 360px;
    } 
    .RecentUsedListClass_Empty
    {
        visibility: hidden;
        height: 0px;
    }
    
    a img
    {
        border: 0px
    }
    a 
    {
        border: 0px;
    }
    p
    {
        margin: 0
    }
    
    .BoderPlaceHolder
    {
        margin: 0px;
        position: absolute;
        border-color: #A982D3;
    }
    #LeftBoderPlaceHolder
    {
        left: 0px;
        top: 0px;
        width: 0px;
        height: 236px;
        border-left-style: solid;
        border-left-width: 1px;
        z-index: 999;
    }
    #RightBoderPlaceHolder
    {
        left: 356px;
        top: 0px;
        width: 0px;
        height: 236px;
        border-right-style: solid;
        border-right-width: 1px;
        z-index: 999;
    }
    
    /*-----------------Skin Style-----------------*/
    
    .back-to-school .Button_Left
    {
        background-color: #476e68;
    }
    .back-to-school .Button_Right
    {
        background-color: #476e68;
    }
    .back-to-school .Button_Left:hover
    {
        background-color: #476e68;
    }
    .back-to-school .Button_Right:hover
    {
        background-color: #476e68;
    }
    .back-to-school .PreviewWindow 
    {
        color: #476e68;
    }
    .back-to-school .PerviewFooter
    {
        background-color: #476e68;
    }
    .back-to-school #Container 
    {
        color: #476e68;
    }
    .back-to-school .EmoticonImage:hover, .back-to-school .EmoticonImage_Hover
    {
        background-color: #476e68;
    }
    .back-to-school #RecentUsedTitle
    {
        color: #476e68;
    }
    .back-to-school .BoderPlaceHolder
    {
        border-color: #476e68;
    }
    /**************************************************************/
    .blue_clouds .Button_Left
    {
        background-color: #1f81c0;
    }
    .blue_clouds .Button_Right
    {
        background-color: #1f81c0;
    }
    .blue_clouds .Button_Left:hover
    {
        background-color: #1f81c0;
    }
    .blue_clouds .Button_Right:hover
    {
        background-color: #1f81c0;
    }
    .blue_clouds .PreviewWindow 
    {
        color: #1f81c0;
    }
    .blue_clouds .PerviewFooter
    {
        background-color: #1f81c0;
    }
    .blue_clouds #Container 
    {
        color: #1f81c0;
    }
    .blue_clouds .EmoticonImage:hover, .blue_clouds .EmoticonImage_Hover
    {
        background-color: #1f81c0;
    }
    .blue_clouds #RecentUsedTitle
    {
        color: #1f81c0;
    }
    .blue_clouds .BoderPlaceHolder
    {
        border-color: #1f81c0;
    }
    /**************************************************************/
    .glossy_berry .Button_Left
    {
        background-color: #500f4b;
    }
    .glossy_berry .Button_Right
    {
        background-color: #500f4b;
    }
    .glossy_berry .Button_Left:hover
    {
        background-color: #500f4b;
    }
    .glossy_berry .Button_Right:hover
    {
        background-color: #500f4b;
    }
    .glossy_berry .PreviewWindow 
    {
        color: #500f4b;
    }
    .glossy_berry .PerviewFooter
    {
        background-color: #500f4b;
    }
    .glossy_berry #Container 
    {
        color: #500f4b;
    }
    .glossy_berry .EmoticonImage:hover, .glossy_berry .EmoticonImage_Hover
    {
        background-color: #500f4b;
    }
    .glossy_berry #RecentUsedTitle
    {
        color: #500f4b;
    }
    .glossy_berry .BoderPlaceHolder
    {
        border-color: #500f4b;
    }

    /**************************************************************/
    .glossy_blue .Button_Left
    {
        background-color: #41629f;
    }
    .glossy_blue .Button_Right
    {
        background-color: #41629f;
    }
    .glossy_blue .Button_Left:hover
    {
        background-color: #41629f;
    }
    .glossy_blue .Button_Right:hover
    {
        background-color: #41629f;
    }
    .glossy_blue .PreviewWindow 
    {
        color: #41629f;
    }
    .glossy_blue .PerviewFooter
    {
        background-color: #41629f;
    }
    .glossy_blue #Container 
    {
        color: #41629f;
    }
    .glossy_blue .EmoticonImage:hover, .glossy_blue .EmoticonImage_Hover
    {
        background-color: #41629f;
    }
    .glossy_blue #RecentUsedTitle
    {
        color: #41629f;
    }
    .glossy_blue .BoderPlaceHolder
    {
        border-color: #41629f;
    }
    /**************************************************************/
    .graffiti .Button_Left
    {
        background-color: #d49581;
    }
    .graffiti .Button_Right
    {
        background-color: #d49581;
    }
    .graffiti .Button_Left:hover
    {
        background-color: #d49581;
    }
    .graffiti .Button_Right:hover
    {
        background-color: #d49581;
    }
    .graffiti .PreviewWindow 
    {
        color: #d49581;
    }
    .graffiti .PerviewFooter
    {
        background-color: #d49581;
    }
    .graffiti #Container 
    {
        color: #d49581;
    }
    .graffiti .EmoticonImage:hover, .graffiti .EmoticonImage_Hover
    {
        background-color: #d49581;
    }
    .graffiti #RecentUsedTitle
    {
        color: #d49581;
    }
    .graffiti .BoderPlaceHolder
    {
        border-color: #d49581;
    }
    /**************************************************************/
    .green_fantasia .Button_Left
    {
        background-color: #81b253;
    }
    .green_fantasia .Button_Right
    {
        background-color: #81b253;
    }
    .green_fantasia .Button_Left:hover
    {
        background-color: #81b253;
    }
    .green_fantasia .Button_Right:hover
    {
        background-color: #81b253;
    }
    .green_fantasia .PreviewWindow 
    {
        color: #81b253;
    }
    .green_fantasia .PerviewFooter
    {
        background-color: #81b253;
    }
    .green_fantasia #Container 
    {
        color: #81b253;
    }
    .green_fantasia .EmoticonImage:hover, .green_fantasia .EmoticonImage_Hover
    {
        background-color: #81b253;
    }
    .green_fantasia #RecentUsedTitle
    {
        color: #81b253;
    }
    .green_fantasia .BoderPlaceHolder
    {
        border-color: #81b253;
    }
    /**************************************************************/
    .icy_blue .Button_Left
    {
        background-color: #7695bf;
    }
    .icy_blue .Button_Right
    {
        background-color: #7695bf;
    }
    .icy_blue .Button_Left:hover
    {
        background-color: #7695bf;
    }
    .icy_blue .Button_Right:hover
    {
        background-color: #7695bf;
    }
    .icy_blue .PreviewWindow 
    {
        color: #7695bf;
    }
    .icy_blue .PerviewFooter
    {
        background-color: #7695bf;
    }
    .icy_blue #Container 
    {
        color: #7695bf;
    }
    .icy_blue .EmoticonImage:hover, .icy_blue .EmoticonImage_Hover
    {
        background-color: #7695bf;
    }
    .icy_blue #RecentUsedTitle
    {
        color: #7695bf;
    }
    .icy_blue .BoderPlaceHolder
    {
        border-color: #7695bf;
    }
    /**************************************************************/
    .mystic_black .Button_Left
    {
        background-color: #666666;
    }
    .mystic_black .Button_Right
    {
        background-color: #666666;
    }
    .mystic_black .Button_Left:hover
    {
        background-color: #666666;
    }
    .mystic_black .Button_Right:hover
    {
        background-color: #666666;
    }
    .mystic_black .PreviewWindow 
    {
        color: #666666;
    }
    .mystic_black .PerviewFooter
    {
        background-color: #666666;
    }
    .mystic_black #Container 
    {
        color: #666666;
    }
    .mystic_black .EmoticonImage:hover, .mystic_black .EmoticonImage_Hover
    {
        background-color: #666666;
    }
    .mystic_black #RecentUsedTitle
    {
        color: #666666;
    }
    .mystic_black .BoderPlaceHolder
    {
        border-color: #666666;
    }
    /**************************************************************/
    .purple .Button_Left
    {
        background-color: #ad86d5;
    }
    .purple .Button_Right
    {
        background-color: #ad86d5;
    }
    .purple .Button_Left:hover
    {
        background-color: #ad86d5;
    }
    .purple .Button_Right:hover
    {
        background-color: #ad86d5;
    }
    .purple .PreviewWindow 
    {
        color: #ad86d5;
    }
    .purple .PerviewFooter
    {
        background-color: #ad86d5;
    }
    .purple #Container 
    {
        color: #ad86d5;
    }
    .purple .EmoticonImage:hover, .purple .EmoticonImage_Hover
    {
        background-color: #ad86d5;
    }
    .purple #RecentUsedTitle
    {
        color: #ad86d5;
    }
    .purple .BoderPlaceHolder
    {
        border-color: #ad86d5;
    }
    /**************************************************************/
    .racer .Button_Left
    {
        background-color: #999999;
    }
    .racer .Button_Right
    {
        background-color: #999999;
    }
    .racer .Button_Left:hover
    {
        background-color: #999999;
    }
    .racer .Button_Right:hover
    {
        background-color: #999999;
    }
    .racer .PreviewWindow 
    {
        color: #999999;
    }
    .racer .PerviewFooter
    {
        background-color: #999999;
    }
    .racer #Container 
    {
        color: #999999;
    }
    .racer .EmoticonImage:hover, .racer .EmoticonImage_Hover
    {
        background-color: #999999;
    }
    .racer #RecentUsedTitle
    {
        color: #999999;
    }
    .racer .BoderPlaceHolder
    {
        border-color: #999999;
    }
    /**************************************************************/
    
    .rose_prints .Button_Left
    {
        background-color: #de6f91;
    }
    .rose_prints .Button_Right
    {
        background-color: #de6f91;
    }
    .rose_prints .Button_Left:hover
    {
        background-color: #de6f91;
    }
    .rose_prints .Button_Right:hover
    {
        background-color: #de6f91;
    }
    .rose_prints .PreviewWindow 
    {
        color: #de6f91;
    }
    .rose_prints .PerviewFooter
    {
        background-color: #de6f91;
    }
    .rose_prints #Container 
    {
        color: #de6f91;
    }
    .rose_prints .EmoticonImage:hover, .rose_prints .EmoticonImage_Hover
    {
        background-color: #de6f91;
    }
    .rose_prints #RecentUsedTitle
    {
        color: #de6f91;
    }
    .rose_prints .BoderPlaceHolder
    {
        border-color: #de6f91;
    }
    /**************************************************************/
    .ruby_red .Button_Left
    {
        background-color: #9d4a5e;
    }
    .ruby_red .Button_Right
    {
        background-color: #9d4a5e;
    }
    .ruby_red .Button_Left:hover
    {
        background-color: #9d4a5e;
    }
    .ruby_red .Button_Right:hover
    {
        background-color: #9d4a5e;
    }
    .ruby_red .PreviewWindow 
    {
        color: #9d4a5e;
    }
    .ruby_red .PerviewFooter
    {
        background-color: #9d4a5e;
    }
    .ruby_red #Container 
    {
        color: #9d4a5e;
    }
    .ruby_red .EmoticonImage:hover, .ruby_red .EmoticonImage_Hover
    {
        background-color: #9d4a5e;
    }
    .ruby_red #RecentUsedTitle
    {
        color: #9d4a5e;
    }
    .ruby_red .BoderPlaceHolder
    {
        border-color: #9d4a5e;
    }
    /**************************************************************/
    .silver .Button_Left
    {
        background-color: #88889a;
    }
    .silver .Button_Right
    {
        background-color: #88889a;
    }
    .silver .Button_Left:hover
    {
        background-color: #88889a;
    }
    .silver .Button_Right:hover
    {
        background-color: #88889a;
    }
    .silver .PreviewWindow 
    {
        color: #88889a;
    }
    .silver .PerviewFooter
    {
        background-color: #88889a;
    }
    .silver #Container 
    {
        color: #88889a;
    }
    .silver .EmoticonImage:hover, .silver .EmoticonImage_Hover
    {
        background-color: #88889a;
    }
    .silver #RecentUsedTitle
    {
        color: #88889a;
    }
    .silver .BoderPlaceHolder
    {
        border-color: #88889a;
    }
    /**************************************************************/
    .sky_blue .Button_Left
    {
        background-color: #316ac5;
    }
    .sky_blue .Button_Right
    {
        background-color: #316ac5;
    }
    .sky_blue .Button_Left:hover
    {
        background-color: #316ac5;
    }
    .sky_blue .Button_Right:hover
    {
        background-color: #316ac5;
    }
    .sky_blue .PreviewWindow 
    {
        color: #316ac5;
    }
    .sky_blue .PerviewFooter
    {
        background-color: #316ac5;
    }
    .sky_blue #Container 
    {
        color: #316ac5;
    }
    .sky_blue .EmoticonImage:hover, .sky_blue .EmoticonImage_Hover
    {
        background-color: #316ac5;
    }
    .sky_blue #RecentUsedTitle
    {
        color: #316ac5;
    }
    .sky_blue .BoderPlaceHolder
    {
        border-color: #316ac5;
    }
    /**************************************************************/
    .stripes .Button_Left
    {
        background-color: #999999;
    }
    .stripes .Button_Right
    {
        background-color: #999999;
    }
    .stripes .Button_Left:hover
    {
        background-color: #999999;
    }
    .stripes .Button_Right:hover
    {
        background-color: #999999;
    }
    .stripes .PreviewWindow 
    {
        color: #999999;
    }
    .stripes .PerviewFooter
    {
        background-color: #999999;
    }
    .stripes #Container 
    {
        color: #999999;
    }
    .stripes .EmoticonImage:hover,  .stripes .EmoticonImage_Hover
    {
        background-color: #999999;
    }
    .stripes #RecentUsedTitle
    {
        color: #999999;
    }
    .stripes .BoderPlaceHolder
    {
        border-color: #999999;
    }
    /**************************************************************/
    .twinkle_pink .Button_Left
    {
        background-color: #d682d6;
    }
    .twinkle_pink .Button_Right
    {
        background-color: #d682d6;
    }
    .twinkle_pink .Button_Left:hover
    {
        background-color: #d682d6;
    }
    .twinkle_pink .Button_Right:hover
    {
        background-color: #d682d6;
    }
    .twinkle_pink .PreviewWindow 
    {
        color: #d682d6;
    }
    .twinkle_pink .PerviewFooter
    {
        background-color: #d682d6;
    }
    .twinkle_pink #Container 
    {
        color: #d682d6;
    }
    .twinkle_pink .EmoticonImage:hover, .twinkle_pink .EmoticonImage_Hover
    {
        background-color: #d682d6;
    }
    .twinkle_pink #RecentUsedTitle
    {
        color: #d682d6;
    }
    .twinkle_pink .BoderPlaceHolder
    {
        border-color: #d682d6;
    }
    /**************************************************************/
    .violet_flame .Button_Left
    {
        background-color: #b285d2;
    }
    .violet_flame .Button_Right
    {
        background-color: #b285d2;
    }
    .violet_flame .Button_Left:hover
    {
        background-color: #b285d2;
    }
    .violet_flame .Button_Right:hover
    {
        background-color: #b285d2;
    }
    .violet_flame .PreviewWindow 
    {
        color: #b285d2;
    }
    .violet_flame .PerviewFooter
    {
        background-color: #b285d2;
    }
    .violet_flame #Container 
    {
        color: #b285d2;
    }
    .violet_flame .EmoticonImage:hover, .violet_flame .EmoticonImage_Hover
    {
        background-color: #b285d2;
    }
    .violet_flame #RecentUsedTitle
    {
        color: #b285d2;
    }
    .violet_flame .BoderPlaceHolder
    {
        border-color: #b285d2;
    }
    /**************************************************************/
    .wood .Button_Left
    {
        background-color: #b98d53;
    }
    .wood .Button_Right
    {
        background-color: #b98d53;
    }
    .wood .Button_Left:hover
    {
        background-color: #b98d53;
    }
    .wood .Button_Right:hover
    {
        background-color: #b98d53;
    }
    .wood .PreviewWindow 
    {
        color: #b98d53;
    }
    .wood .PerviewFooter
    {
        background-color: #b98d53;
    }
    .wood #Container 
    {
        color: #b98d53;
    }
    .wood .EmoticonImage:hover, .wood .EmoticonImage_Hover
    {
        background-color: #b98d53;
    }
    .wood #RecentUsedTitle
    {
        color: #b98d53;
    }
    .wood .BoderPlaceHolder
    {
        border-color: #b98d53;
    }
    /**************************************************************/
    </style>
</head>
<body>
    <script type="text/javascript">
        window.onload = YAHOO.Msgr.EmoticonManager.onLoad;
        YAHOO.Msgr.EmoticonManager.disableSel();
    </script>
    <div id="Container">
        <div id = "LeftBoderPlaceHolder" class = "BoderPlaceHolder"></div>
        <div id = "RightBoderPlaceHolder" class = "BoderPlaceHolder"></div>
        <input id="LeftButton" alt = "Left" class="Button_Left" type="button" onclick="YAHOO.Msgr.EmoticonManager.onLeft()" />
        <input id="RightButton" alt = "Right" class="Button_Right" type="button" onclick="YAHOO.Msgr.EmoticonManager.onRight()" />
        <div id="TitleBar">
        </div>
        <div id="EmoticonList">
            <div id="Page0" class="OnePage">
            </div>
            <div id="Page1" class="OnePageHidden">
            </div>
            <div id="Page2" class="OnePageHidden">
            </div>
        </div>
        <div id="RecentUsedTitle" class = "RecentUsedTitleClass_Empty">
        </div>
        <div id="RecentUsedList" class ="RecentUsedListClass_Empty">
        </div>
    </div>
</body>
</html>
